/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="task-create">
        <el-breadcrumb v-if="routeName === 'data_project'" separator="/">
            <el-breadcrumb-item :to="{ name: 'home' }"><i class="el-icon-s-home"></i></el-breadcrumb-item>
            <el-breadcrumb-item :to="{ name: 'task_post' }">
                <lang>任务提交</lang>
            </el-breadcrumb-item>
            <el-breadcrumb-item>{{ routeTitle }}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="task-create__body">
            <div class="task-body__title">
                <div class="task-title__top">
                    <i v-if="step === 0" class="iconfont icongoback" @click="toBack"/>
                    <lang>创建数据工程任务</lang>
                </div>
                <div class="task-title__step">
                    <sf-step v-model="step" content-location="right">
                        <sf-step-item :title="_('填写基础信息')" :description="_('创建数据工程任务')"/>
                        <sf-step-item :title="_('输入SQL执行脚本')" :description="_('输入要执行的SQL脚本')"/>
                        <sf-step-item :title="_('配置任务属性')" :description="_('创建成功')"/>
                    </sf-step>
                </div>
            </div>
            <div class="task-body__content">
                <base-form v-if="step===0" ref="form"/>
                <sql-form v-else-if="step===1" ref="form"/>
                <config-form v-else ref="form"/>
            </div>
            <div class="task-body__footer">
                <sf-button v-if="step!==0" size="large" @click="step-=1">
                    <lang>上一步</lang>
                </sf-button>
                <sf-button-primary v-if="step !== 2" size="large" @click="nextStep">
                    <lang>下一步</lang>
                </sf-button-primary>
                <sf-button-primary v-if="step===2" :loading="loading" size="large" @click="commitTask">
                    <lang>完成</lang>
                </sf-button-primary>
            </div>
        </div>
    </div>
</template>

<script>
import SqlForm from "./commen/sql_form";
import ConfigForm from "./commen/config_form";
import BaseForm from "./commen/base_form";

const POSTTASK = '/task-manage/api/v2/jobs'

export default {
    name: "DataProject",
    components: {
        SqlForm, ConfigForm, BaseForm
    },
    data() {
        return {
            step: this.$store.state.task.step,
            loading: false,
            commit: false,
        }
    },
    computed: {
        routeName() {
            return this.$route.name
        },
        routeTitle() {
            return this.$route.meta.title
        }
    },
    mounted() {
    },
    methods: {
        toBack() {
            this.$router.push({
                name: 'task_post'
            })
        },
        nextStep() {
            const formRef = this.$refs.form
            if (!formRef.isValid()) {
                return;
            }
            this.$store.commit('changeForm', formRef.getJsonValue())
            this.step += 1;
        },
        async commitTask() {
            const formRef = this.$refs.form
            if (!await formRef.isValid()) {
                return;
            }
            this.$store.commit('changeForm', formRef.getJsonValue())
            const params = this.$store.state.task.form
            this.loading = true;
            let {msg, success} = await this.$ajax.post(POSTTASK, params);
            if (!success) {
                this.$warn(msg || _('提交失败'), {autoHide: true})
                this.loading = false;
                return;
            }
            this.loading = false;
            this.$store.commit('clearForm')
            this.$store.commit('changeStep', 0)
            this.commit = true;
            this.$router.push({name: 'task_list'})
        }
    },
    beforeDestroy() {
        if(this.commit) {
            return ;
        }
        const formRef = this.$refs.form
        this.$store.commit('changeForm', formRef.getJsonValue())
        this.$store.commit('changeStep', this.step)
    }
}
</script>

<style scoped lang="less">
.task-create {
    height: 100%;
    
    .el-breadcrumb {
        margin-bottom: 24px;
        
        .el-breadcrumb__item {
            /deep/ .is-link {
                font-weight: normal !important;
            }
            
            /deep/ .el-breadcrumb__inner {
                font-weight: 600;
            }
        }
    }
    
    .task-create__body {
        height: calc(100% - 38px);
        background-color: #fff;
        padding: 24px 44px;
        
        .task-body__title {
            width: 100%;
            
            .task-title__top {
                display: flex;
                align-items: center;
                
                .iconfont {
                    font-size: 24px;
                    color: #365FD9;
                    margin-right: 24px;
                    cursor: pointer;
                }
                
                span {
                    font-size: 20px;
                }
            }
            
            .task-title__step {
                height: 160px;
                display: flex;
                justify-content: center;
                align-items: center;
                
                .sfv-steps__wrap {
                    width: 65%;
                    min-width: 715px;
                    justify-content: center;
                    
                    /deep/ .sfv-step-item {
                        .sfv-step__head {
                            .sfv-step__line {
                                display: none;
                            }
                            
                            .sfv-step-icon__wrapper {
                                width: 48px;
                                height: 48px;
                                
                                .sfv-step__icon {
                                    width: 28px;
                                    height: 28px;
                                    line-height: 25px;
                                }
                            }
                            
                            .sfv-step--right__main {
                                top: 10px;
                                
                                .sfv-step--right__title {
                                    font-size: 18px;
                                    line-height: 24px;
                                    color: #1D2129;
                                }
                                
                                .sfv-step--right__description {
                                    font-size: 12px;
                                    line-height: 20px;
                                    color: #86909C;
                                }
                            }
                        }
                    }
                }
            }
        }
        
        .task-body__content {
            overflow: auto;
            height: calc(100% - 234px);
        }
        
        .task-body__footer {
            height: 48px;
            display: flex;
            justify-content: center;
            
            .sfv-btn + .sfv-btn {
                margin-left: 24px;
            }
        }
    }
}
</style>
